import React from 'react'

import { observer, inject } from 'mobx-react'

import { Columns, Column } from '@kube-design/components'

import styles from './index.scss'

import PersonCenter from './PersonCenter'
import ResourcesUsage from './ResourcesUsage'
import ClusterOverview from './ClusterOverview'
import WorkSheet from './WorkSheet'

@inject('clusterStore')
@observer
class AdminOverview extends React.Component {
  componentDidMount() {
    this.cluster.fetchVersion(this.props.match.params)
  }

  get cluster() {
    return this.props.clusterStore
  }

  render() {
    const { match } = this.props
    const { detail } = this.cluster
    return (
      <div className={styles.parentColor}>
        <Columns>
          <Column>
            <PersonCenter cluster={detail} version={this.cluster.version} />
            <ResourcesUsage cluster={match.params.cluster} />
            <ClusterOverview {...this.props} cluster={match.params.cluster} />
          </Column>
          <Column className="is-narrow is-4">
            <WorkSheet cluster={match.params.cluster} />
          </Column>
        </Columns>
      </div>
    )
  }
}

export default AdminOverview
